/**
 * 夜班限时签到设置
 * @author levy
 */
import FooterBtn from '../components/detail/FooterBtn';

(function( lf, r,mui) {
    var ajax = lf.utils.ajax,
        log = lf.utils.log,
        RC = r.createClass;


    var DayPicker = RC({
        statics: {
            show: function () {
                //这里this.refs.mask会失败,因为组件没挂载
                $('.mui-backdrop').addClass('mui-backdrop-active');
            },
        },
        getInitialState: function () {
            return {
                footBtn: [ {aLinkClass: 'green', clickHandler: this.saveDay, text: '保存'}, ],
            }
        },
        saveDay: function () {
            //获取数据
            var days = [];
            $('.day-picker ul').find('.checked').siblings('.day')
                .each(function (i,day) {
                    //这样是raw html element
                    days.push(day.innerHTML);
                });
            log(days)

            Repeat.useCustomize();
        },
        componentDidMount: function () {
            //hide day picker
            r.findDOMNode(this.refs.mask).addEventListener('tap', function () {
                $(this).removeClass('mui-backdrop-active');
            });

            r.findDOMNode(this.refs.content).addEventListener('tap', function (e) {
                var $node = $(e.target);
                //toggle check day
                if(e.target.tagName == 'LI'){
                    $node.find('.mui-icon').toggleClass('checked');
                }

                //非底部按钮才阻止冒泡
                if(!$node.hasClass('mui-tab-item'))
                    lf.utils.stopBubble(e);
            });

        },
        render: function () {
            var day_data = ['周一','周二','周三','周四','周五','周六','周日'],
                days = day_data.map(function (day) {
                   return (
                       <li className="mui-table-view-cell">
                           <span className="day">{day}</span>
                           <span className="mui-icon mui-icon-checkmarkempty"></span>
                       </li>
                   )
                });

            return(
                <div ref="mask" className="mui-backdrop">
                    <div ref="content" className="day-picker slideInUp">
                        <p className="font52 ele-center day-picker-title">自定义</p>
                        <ul className="mui-table-view lf-list">
                            {days}
                        </ul>
                        <FooterBtn data={this.state.footBtn} />
                    </div>
                </div>
            );
        }
    });

    var Repeat = RC({
        statics: {
            useCustomize: function () {
               var last_li = $('#repeatList').children(':last-child');

                last_li.siblings().find('.mui-icon').removeClass('checked');

                last_li.find('a').removeClass('mui-navigate-right')
                   .find('.mui-icon').addClass('checked');
            }
        },
        componentDidMount: function () {
            var $lis = $(r.findDOMNode(this.refs.repeatList)).find('li'),
                $last_li = $lis.eq($lis.length - 1),
                class_str = 'checked';

            //首标签默认激活
            $lis.eq(0).find('.mui-icon').addClass(class_str);

            //自定义标签,样式不一样;显示dayPicker
            $last_li.find('a').addClass('mui-navigate-right').bind('tap', function (e) {
                DayPicker.show();
            });

            //前三个标签,绑定事件;没有jQ的end()方法
            $lis.filter(':not(:last-child)').bind('tap', function (e) {
                $(e.target).find('.mui-icon').addClass(class_str)
                    .parent().parent()
                    .siblings().find('.mui-icon').removeClass(class_str);

                //考虑到点击了自定义标签后，又点击了这些标签
                var $a = $last_li.find('a');
                if(!$a.hasClass('mui-navigate-right'))
                    $a.addClass('mui-navigate-right').find('.mui-icon').removeClass('checked');

                lf.utils.stopBubble(e);
            });



        },
        render: function () {
            var li_data = ['只响一次','每天','周一到周五','自定义'];
            var lis = li_data.map(function(data){
                return(
                        <li className="mui-table-view-cell">
                            <a>
                                <span>{data}</span>
                                <span className="mui-icon mui-icon-checkmarkempty"></span>
                            </a>
                        </li>
                    );
                });

            return (
                <div className="repeat-setting font52">
                    <p className="setting-title font52">重复</p>
                    <ul id="repeatList" ref="repeatList" className="mui-table-view lf-list">
                        {lis}
                    </ul>
                    <DayPicker />
                </div>
            );
        }
    });

    var TimeLimit = RC({
        componentDidMount: function () {
            var container = r.findDOMNode(this.refs.radioContainer);

            $(container).find('.radio').bind('tap',function(e){
                $(e.target).addClass('radio-active')
                    .siblings('.radio').removeClass('radio-active');
            });
        },
        render: function () {
            return(
                <div className="font52 time-limit-setting">
                    <p className="font52 setting-title">限时</p>
                    <div ref="radioContainer" className="flex-box-row">
                        <span className="radio radio-active mui-icon mui-icon-checkmarkempty"></span>
                        <span className="second">30s</span>
                        <span className="radio mui-icon mui-icon-checkmarkempty"></span>
                        <span className="second">60s</span>
                        <span className="radio mui-icon mui-icon-checkmarkempty"></span>
                        <span className="second">90s</span>
                        <label htmlFor="second-input" className="radio mui-icon mui-icon-checkmarkempty"></label>
                        <input id="second-input" className="second-input" type="text" placeholder="自定义"/>
                        <span className="second">s</span>
                    </div>
                </div>
            );
        },
    })

    var Body = RC({
        getInitialState: function () {
            return ({
                mock:[],
                clockList:[],
                settingVisible:'none',
                footBtn:[
                    {aLinkClass: 'red', clickHandler: this.deleteSetting, text: '删除当前设置'},
                    {aLinkClass: 'green', clickHandler: this.SaveSetting, text: '保存'},
                ],
                footBtnBelong:'',
            });
        },
        componentWillMount: function () {

        },
        getTime: function(){
            var times = mui('.mui-picker .highlight');

            return times[0].innerText + ":" + times[1].innerText;
        },
        //保存单个闹钟设置
        SaveSetting: function (e,belong) {
            log(belong)

            var data = {};
            //data.index = index;
            data.time = this.getTime();
            data.interval = '每天';
            alert('保存成功')

        },
        deleteSetting: function (e,belong) {
            log(belong)
            alert('删除成功')

        },
        render: function () {

            return (
                <div className="sign-in-setting-edit ">
                    <form ref="content" className="clock-setting">
                       <TimeLimit/>
                       <Repeat/>
                    </form>
                    <FooterBtn data={this.state.footBtn} belong={this.state.footBtnBelong}/>
                </div>
            )
        }
    });

    r.render(
			<Body />,
			document.getElementById('root'),function(){
            (function($) {
                $.init();

                var optionsJson = '{"type":"time"}',
                    options = JSON.parse(optionsJson),
                    $picker = new $.DtPicker(options);

                var picker = document.querySelector('.mui-dtpicker');
                picker.parentNode.insertBefore(picker,document.getElementById('root'));

                $picker.show();

            })(mui);
        }
	)

})( liefeng, React,mui)
